<template>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="外观" prop="imgPath">
            <template #default="scope">
                <img :src="scope.row.imgPath" style="height: 150px;width: 125px;" />
            </template>
        </el-table-column>
        <el-table-column label="酒店名称" prop="name" />
        <el-table-column label="星级" prop="type" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="预订电话" prop="phone" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" type="success" @click="QueryInfo(scope.$index, scope.row)">预订</el-button>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="查询" />
            </template>
        </el-table-column>
    </el-table>
    <el-drawer v-model="drawer" title="预订" :with-header="false" @close="onDrawerClose">
        <span style="font-size: x-large; font-weight: bold; text-align: center; display:block;">预订</span>
        <div style="margin: 10px 0px 50px;">
            <el-select style="margin-bottom: 15px;" v-model="value" class="m-2" placeholder="选择房间" size="large"
                @change="selectRoom">
                <el-option v-for="(item, index) in options" :key="index" :label="item.roomName" :value="item.roomName"
                    @click.native="handleSelect(index)" />
            </el-select>
            <img :src="this.r_img" style="height: 50%; width: 100%; margin-top: 10px; margin-top: 10px;" :style="display" />
            <el-descriptions :column="4" :size="size" direction="vertical" :style="blockMargin" border>
                <el-descriptions-item label="价格">{{ r_price }}</el-descriptions-item>
                <el-descriptions-item label="类型">{{ r_type }}</el-descriptions-item>
            </el-descriptions>
            <el-date-picker style="margin-top: 15px;" v-model="value1" type="daterange" range-separator="至"
                start-placeholder="入住日期" end-placeholder="离开日期" :size="size" />
            <div style="text-align: right;">
                <el-button @click="sendOrder" type="primary" plain style="margin-top: 15px;">提交</el-button>
            </div>
        </div>
    </el-drawer>
</template>
  
<script>
import { ref } from 'vue'
// import { getRequest, postRequest, postRequestWithRaw } from '../../../api/axiosAPI'
import { getRequest, postRequest, postRequestWithRaw } from '../../../api/axiosRequest'
import moment from 'moment'

export default {
    setup() {

    },
    mounted() {
        getRequest('/hotel?type=all')
            .then((response) => {
                if (response.status === 200) {
                    // console.log('获取酒店信息')
                    // console.log(response.data.data)
                    let tempData = response.data.data
                    for (let i = 0; i < tempData.length; i++) {
                        this.tableData[i] = {
                            name: tempData[i].name,
                            imgPath: tempData[i].imgPath,
                            phone: tempData[i].phone,
                            address: tempData[i].address,
                            type: tempData[i].type,
                            hid: tempData[i].hid
                        }
                    }
                }
                else {
                    console.log('Network Error!')
                }
            })
            .catch((error) => {
                console.log(error)
            })
    },
    data() {
        return {
            value: ref(),
            value1: ref(''),
            drawer: false,
            display: 'display:none',
            search: '',
            rname: '',
            r_img: '',
            r_price: '',
            r_type: '',
            r_id: '',
            h_id: '',
            tableData: [{
                hid: '',
                name: '',
                address: '',
                phone: '',
                type: '',
                imgPath: '',
            }
            ],
            options: [{
                hid: '',
                price: 1,
                rid: '',
                roomName: '',
                type: '',
                img: '',
                id: 0,
            }],
        }
    },
    computed: {
        filterTableData() {
            return this.tableData.filter(
                (data) =>
                    !this.search ||
                    data.address.toLowerCase().includes(this.search.toLowerCase()) ||
                    data.phone.toLowerCase().includes(this.search.toLowerCase()) ||
                    data.name.toLowerCase().includes(this.search.toLowerCase()) ||
                    data.type.toLowerCase().includes(this.search.toLowerCase())
            )
        }
    },
    methods: {
        QueryInfo(index, row) {
            this.drawer = true
            this.h_id = row.hid
            getRequest(`http://localhost:8022/hotel/room/getByHid?hid=${this.h_id}&available=true`)
                .then((response) => {
                    if (response.status === 200) {
                        console.log('酒店房间查询')
                        console.log(response.data.data)
                        let tempData = response.data.data
                        console.log(tempData[0].imgPath)
                        console.log(tempData.length)
                        while (this.options.length) {
                            this.options.pop()
                        }
                        for (let i = 0; i < tempData.length; i++) {
                            this.options[i] = {
                                hid: tempData[i].hid,
                                price: tempData[i].price,
                                rid: tempData[i].rid,
                                roomName: tempData[i].roomName,
                                type: tempData[i].type,
                                img: tempData[i].imgPath,
                                id: i,
                            }
                        }
                        console.log(this.options)
                    }
                })
        },

        // 关闭
        onDrawerClose () {
            this.drawer = false;
            this.value = '';
            this.value1 = [];
            this.r_img = '';
            this.r_price = '';
            this.r_type = '';
            this.r_id = '';
            this.display = 'display:none'

            // 清空options数组（如果需要）
            while (this.options.length) {
                this.options.pop();
            }
        },

        selectRoom(val) {
            console.log(val)
            this.rname = val
        },
        handleSelect(index) {
            console.log(index)
            this.r_img = this.options[index].img
            this.r_price = this.options[index].price
            this.r_type = this.options[index].type
            this.r_id = this.options[index].rid
            this.display = 'display:block'
        },
        sendOrder() {
            console.log(this.value1)
            let start_date = this.value1[0].toString().split(' ')
            let end_date = this.value1[1].toString().split(' ')
            let start_month = this.switchToMonthNum(start_date[1])
            let end_month = this.switchToMonthNum(end_date[1])
            let start_year = start_date[3]
            let end_year = end_date[3]
            let start_day = start_date[2]
            let end_day = end_date[2]
            let checkInDate = start_year + '-' + start_month + '-' + start_day
            let checkOutDate = end_year + '-' + end_month + '-' + end_day
            console.log(checkInDate, checkOutDate)
            let order_data = {
                rid: this.r_id,
                checkInDate: checkInDate,
                checkOutDate: checkOutDate
            }
            postRequestWithRaw('http://localhost:8022/hotel/room/reserve', order_data)
                .then((response) => {
                    if (response.status === 200) {
                        console.log('请求成功')
                        alert('预订成功')
                        this.drawer = false
                        this.r_id = ''
                        this.r_img = ''
                        this.r_price = ''
                        this.r_type = ''
                        this.value1 = ''
                        this.value = ''
                    }
                })
            this.reflashroom()
        },
        reflashroom () {
            getRequest(`http://localhost:8022/hotel/room/getByHid?hid=${this.h_id}&available=true`)
                .then((response) => {
                    if (response.status === 200) {
                        console.log('酒店房间查询')
                        console.log(response.data.data)
                        let tempData = response.data.data
                        console.log(tempData[0].imgPath)
                        console.log(tempData.length)
                        while (this.options.length) {
                            this.options.pop()
                        }
                        for (let i = 0; i < tempData.length; i++) {
                            this.options[i] = {
                                hid: tempData[i].hid,
                                price: tempData[i].price,
                                rid: tempData[i].rid,
                                roomName: tempData[i].roomName,
                                type: tempData[i].type,
                                img: tempData[i].imgPath,
                                id: i,
                            }
                        }
                        console.log(this.options)
                    }
                })
        },
        switchToMonthNum (date) {
            switch (date) {
                case 'Jan': date = '01'
                case 'Feb': date = '02'
                case 'Mar': date = '03'
                case 'Apr': date = '04'
                case 'May': date = '05' // 注意这里原来缺少了 'May'
                case 'Jun': date = '06'
                case 'Jul': date = '07'
                case 'Aug': date = '08'
                case 'Sep': date = '09'
                case 'Oct': date = '10'
                case 'Nov': date = '11'
                case 'Dec': date = '12'
                default: date = date // 或者抛出异常，因为输入不合法
            }
            return date
        }
    }
}
</script>
  